<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D变换_背部可见性</title>
  <style>
    .outer{
      width: 300px;
      height: 300px;
      border:2px solid black;
      margin:520px;
      transform-style: preserve-3d;/*开启3D空间*/
      perspective: 500px;
      perspective-origin: 152px 152px;/*设置透视点的位置*/

    }
    .inner{
      width: 300px;
      height: 300px;
      background-color: rgba(0,191,225,0.7);
      /*当角度超过90度时,开始发生反转,我们可以从背部看到该元素,文字布局也会发生反转
      我们可以使用backface-visibility:hidden设置成背部不可见
      */
      transform: rotateY(10deg);
      backface-visibility: hidden;
      /*设置了之后就不能看到背部了,当超过90度达到背部时直接为透明,直到再次角度再次翻转回来*/
    }

  </style>
</head>
<body>
<div class="outer">
  <div class="inner">inner1</div>
</div>

</body>
</html>